<template>
  <view class="article-container">
    <!-- 文章标题 -->
    <text 
      class="article-title" 
      selectable="true"
      v-if="showContent"
    >
      两个超冷的小笑话
    </text>

    <!-- 加载进度条（2秒后消失） -->
    <progress 
      :percent="progress" 
      stroke-width="3" 
      v-if="showProgress"
      class="progress-bar"
    ></progress>

    <!-- 文章内容（富文本）- 进度条完成后才显示 -->
    <rich-text 
      :nodes="articleContent" 
      class="article-content"
      v-if="showContent"
    ></rich-text>

    <!-- 新增：点赞收藏区域 -->
    <view class="interaction-section" v-if="showContent">
      <!-- 点赞比例文字 -->
      <view class="interaction-text-group">
        <text class="interaction-text">点赞 80%</text>
        <text class="interaction-text">收藏 60%</text>
      </view>

      <!-- 点赞收藏进度条 -->
      <view class="interaction-progress-group">
        <!-- 点赞进度条：红色 #dd524d -->
        <progress 
          percent="80" 
          stroke-width="4" 
          activeColor="#dd524d" 
          backgroundColor="#f5f5f5"
          class="interaction-progress"
        ></progress>
        
        <!-- 收藏进度条：橙色 #f0ad4e -->
        <progress 
          percent="60" 
          stroke-width="4" 
          activeColor="#f0ad4e" 
          backgroundColor="#f5f5f5"
          class="interaction-progress"
        ></progress>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      progress: 0,
      showProgress: true,
      articleContent: `
        <div class="joke-section">
          <h3>笑话一：数学书的烦恼</h3>
          <p>数学书和语文书吵架，数学书气呼呼地说：“我每天要教大家算题、解方程，忙得不可开交，你却整天就知道背课文、写作文，多轻松！”语文书听完笑了：“你可别抱怨了，至少你每页数字都一样多，我还得应付不同长度的段落呢！再说了，你见过谁做题像背课文一样轻松吗？”数学书想了想，默默闭上了嘴。</p>
          
          <h3>笑话二：迟到的面包</h3>
          <p>面包店门口，一个面包慌慌张张地跑过来，店员疑惑地问：“你怎么才来？其他面包早就摆上货架了！”面包喘着气说：“别提了，我出门前忘了发酵，在家等了半天，结果还是没发起来，只能硬着头皮过来了。”店员无奈地摇摇头：“你这哪是面包啊，分明是‘石头’嘛！”</p>
          
          <h3>三、开发者信息</h3>
                    <p>本文作者：<strong>石央平（学号：2531010120135）</strong></p>
                    <p>发布日期：2025年10月31日</p>
        </div>
      `,
      showContent: false,
      timer: null // 定时器引用
    };
  },
  onLoad() {
    const duration = 2000; // 进度条总时长2秒
    const startTime = Date.now();
    const endTime = startTime + duration;
    
    // 使用时间差计算进度，避免浮点数累加精度问题
    this.timer = setInterval(() => {
      const now = Date.now();
      if (now >= endTime) {
        // 进度完成
        this.progress = 100;
        clearInterval(this.timer);
        // 延迟100ms切换显示状态，确保进度条100%状态可见
        setTimeout(() => {
          this.showProgress = false;
          this.showContent = true;
        }, 100);
      } else {
        // 实时计算当前进度
        this.progress = ((now - startTime) / duration) * 100;
      }
    }, 20); // 每20ms更新一次进度
  },
  onUnload() {
    // 页面卸载时清除定时器，防止内存泄漏
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>

<style>
.article-container {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.article-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 15px;
  line-height: 1.5;
}

.progress-bar {
  width: 100%;
  margin-bottom: 25px;
  height: 6px;
}

.article-content {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 30px; /* 增加底部间距，与互动区域分隔 */
}

/* 富文本内部样式 - 适配笑话内容 */
.joke-section h3 {
  font-size: 18px;
  color: #222;
  margin: 25px 0 12px;
  font-weight: bold;
  border-left: 4px solid #007AFF;
  padding-left: 10px;
}

.joke-section p {
  margin-bottom: 18px;
  padding: 0 5px;
}

/*  hover效果，增加互动感 */
.joke-section p:hover {
  background-color: #f5f8ff;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

/* 新增：互动区域样式 */
.interaction-section {
  padding: 15px;
  background-color: #fafafa;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 互动文字组样式 */
.interaction-text-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.interaction-text {
  font-size: 15px;
  font-weight: 500;
  color: #555;
}

/* 互动进度条组样式 */
.interaction-progress-group {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 进度条之间的间距 */
}

/* 单个进度条样式 */
.interaction-progress {
  width: 100%;
  height: 8px;
  border-radius: 4px; /* 圆角优化 */
}
</style>